{% extends "pos/base.html" %}
{% load static %}

{% block title %}Android Payments Approval{% endblock %}
{% block heading %}Android Payments Approval{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="{% static 'styles/pos_api_v2/offline/approvals/approval.css' %}">
{% endblock %}

{% block content %}

<div class="approval-page">

    <form method="get" class="approval-filter-card">
        <div class="row">

            <div class="col-md-2">
                <label>Salesman</label>
                <select name="salesman_id" class="form-control">
                    <option value="">All Salesmen</option>
                    {% for s in salesman_list %}
                        <option value="{{ s.id }}" {% if request.GET.salesman_id == s.id|stringformat:"s" %}selected{% endif %}>
                            {{ s.username }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            <div class="col-md-3">
                <label>Customer</label>
                <input type="text" name="customer" class="form-control" placeholder="Search customer..." value="{{ request.GET.customer }}">
            </div>

            <div class="col-md-2">
                <label>Date From</label>
                <input type="date" name="date_from" class="form-control" value="{{ request.GET.date_from }}">
            </div>

            <div class="col-md-2">
                <label>Date To</label>
                <input type="date" name="date_to" class="form-control" value="{{ request.GET.date_to }}">
            </div>

            <div class="col-md-1">
                <label>Min</label>
                <input type="number" step="0.01" name="min_amount" class="form-control" value="{{ request.GET.min_amount }}">
            </div>



        </div>

        <div class="approval-filter-actions">
            <button type="submit" class="btn btn-primary">Apply Filters</button>
            <a href="?" class="btn btn-light">Clear</a>
            <span class="approval-count">Showing {{ rows|length }} records</span>
        </div>
    </form>

    <div class="approval-title-row">
        <div>
            <h4>Android Payments <span class="badge badge-warning">Staging</span></h4>
            <p>Payments posted from app awaiting approval.</p>
        </div>

        <div>
            <a href="{% url 'pos_api_v2:offline:approvals:sale_approval_list' %}" class="btn btn-outline-primary">
                Sale Approvals
            </a>
        </div>
    </div>

    <div class="approval-summary-row">
        <div class="approval-summary-card">
            <span>Payments</span>
            <strong>{{ summary.payments }}</strong>
        </div>
        <div class="approval-summary-card">
            <span>Total Received</span>
            <strong>{{ summary.total_amount|floatformat:2 }}</strong>
        </div>
    </div>

    <div class="approval-table-card">
        <form id="paymentsBulkForm" method="post" action="{% url 'pos_api_v2:offline:approvals:payment_approve' %}">
            {% csrf_token %}

            <div class="mb-2">
                <button type="submit"
                        class="btn btn-success btn-sm"
                        onclick="return validateSelectedPayments();">
                    Approve Selected
                </button>

                <button type="submit"
                        class="btn btn-danger btn-sm"
                        formaction="{% url 'pos_api_v2:offline:approvals:payment_reject' %}"
                        onclick="return confirmBulkRejectPayments();">
                    Reject Selected
                </button>
            </div>
        <table class="table table-bordered table-hover approval-table">
            <thead>
                <tr>
                    <th class="text-center" style="width:45px;">
                        <input type="checkbox" id="chkAllPayments">
                    </th>
                    <th>Payment No</th>
                    <th>Date</th>
                    <th>Customer</th>
                    <th>Salesman</th>
                    <th class="text-right">Amount</th>
                    <th>Remarks</th>
                    <th class="text-center">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for r in rows %}
                    <tr>
                        <td class="text-center">
                            <input type="checkbox" class="payment-check" name="invoice_nos" value="{{ r.payment_no }}">
                        </td>
                        <td>#{{ r.payment_no }}</td>
                        <td>{{ r.payment.transaction_date }}</td>
                        <td>{{ r.customer_name }}</td>
                        <td>{{ r.booker_name|default:"-" }}</td>
                        <td class="text-right">{{ r.amount|floatformat:2 }}</td>
                        <td>{{ r.payment.remarks1 }}</td>
                       
                        <td class="text-center">
                            <a class="btn btn-sm btn-primary" href="{% url 'pos_api_v2:offline:approvals:payment_approval_detail' r.payment_no %}">
                                View
                            </a>
                        </td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="8" class="approval-empty">
                            No staging payments found.
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        </form>
    </div>

</div>

{% endblock %}


{% block javascripts %}
<script>
document.addEventListener("DOMContentLoaded", function () {
    var chkAll = document.getElementById("chkAllPayments");

    if (chkAll) {
        chkAll.addEventListener("change", function () {
            var checks = document.querySelectorAll(".payment-check");
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = chkAll.checked;
            }
        });
    }
});

function getSelectedPaymentsCount(){
    var checks = document.querySelectorAll('input[name="invoice_nos"]:checked');
    return checks.length;
}

function validateSelectedPayments(){
    if(getSelectedPaymentsCount() <= 0){
        alert("Please select at least one payment.");
        return false;
    }
    return true;
}

function confirmBulkRejectPayments(){
    var count = getSelectedPaymentsCount();

    if(count <= 0){
        alert("Please select at least one payment to reject.");
        return false;
    }

    return confirm(
        "Reject " + count + " selected payment(s)?\n\n" +
        "This will permanently delete staging payment rows."
    );
}
</script>

{% endblock %}